<template>
  <div class="log-management">
    <el-card class="log-card">
      <template #header>
        <div class="card-header">
          <span>系统日志管理</span>
          <div class="actions">
            <el-button type="primary" @click="refreshLogs" :icon="Refresh">
              刷新
            </el-button>
            <el-button @click="clearLogs" :icon="Delete">
              清空日志
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="filter-section">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="操作人">
            <el-input 
              v-model="filterForm.user" 
              placeholder="请输入操作人"
              clearable
            />
          </el-form-item>
          
          <el-form-item label="操作类型">
            <el-select v-model="filterForm.action" placeholder="请选择操作类型" clearable>
              <el-option label="学生信息查询" value="学生信息查询" />
              <el-option label="学生信息录入" value="学生信息录入" />
              <el-option label="学生信息修改" value="学生信息修改" />
              <el-option label="系统登录" value="系统登录" />
              <el-option label="删除学生信息" value="删除学生信息" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="filterLogs" :icon="Search">
              筛选
            </el-button>
            <el-button @click="resetFilter" :icon="Refresh">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <el-table 
        :data="displayLogs" 
        border 
        style="width: 100%"
        v-loading="loading"
        element-loading-text="数据加载中..."
        stripe
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="date" label="操作时间" width="180" />
        <el-table-column prop="user" label="操作人" width="120" />
        <el-table-column prop="action" label="操作类型" width="150" />
        <el-table-column prop="detail" label="操作详情" />
      </el-table>

      <div class="pagination-container">
        <el-pagination 
          background 
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Delete } from '@element-plus/icons-vue'
import { useStudentStore } from '@/stores/student'

const studentStore = useStudentStore()

// 状态
const loading = ref(false)

// 筛选表单
const filterForm = reactive({
  user: '',
  action: '',
  dateRange: []
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(studentStore.logs.length) // 改为响应式引用

// 显示的日志数据
const displayLogs = computed(() => {
  // 实现筛选逻辑
  let filteredLogs = [...studentStore.logs];
  
  // 按操作人筛选
  if (filterForm.user) {
    filteredLogs = filteredLogs.filter(log => 
      log.user.includes(filterForm.user)
    );
  }
  
  // 按操作类型筛选
  if (filterForm.action) {
    filteredLogs = filteredLogs.filter(log => 
      log.action.includes(filterForm.action)
    );
  }
  
  // 按日期范围筛选
  if (filterForm.dateRange && filterForm.dateRange.length === 2) {
    const [startDate, endDate] = filterForm.dateRange;
    filteredLogs = filteredLogs.filter(log => {
      // 只比较日期部分
      const logDate = new Date(log.date.split(' ')[0]);
      return logDate >= new Date(startDate) && logDate <= new Date(endDate);
    });
  }
  
  // 分页处理
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredLogs.slice(start, end);
});

// 当每页的条数发生变化的时候触发
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
}

// 当页码发生变化的时候触发
const handleCurrentChange = (val: number) => {
  currentPage.value = val
}

// 筛选日志
const filterLogs = () => {
  loading.value = true;
  currentPage.value = 1; // 筛选时回到第一页
  
  // 更新总数
  let filteredLogs = [...studentStore.logs];
  
  // 按操作人筛选
  if (filterForm.user) {
    filteredLogs = filteredLogs.filter(log => 
      log.user.includes(filterForm.user)
    );
  }
  
  // 按操作类型筛选
  if (filterForm.action) {
    filteredLogs = filteredLogs.filter(log => 
      log.action.includes(filterForm.action)
    );
  }
  
  // 按日期范围筛选
  if (filterForm.dateRange && filterForm.dateRange.length === 2) {
    const [startDate, endDate] = filterForm.dateRange;
    filteredLogs = filteredLogs.filter(log => {
      // 只比较日期部分
      const logDate = new Date(log.date.split(' ')[0]);
      return logDate >= new Date(startDate) && logDate <= new Date(endDate);
    });
  }
  
  total.value = filteredLogs.length;
  
  // 模拟筛选延迟
  setTimeout(() => {
    ElMessage.success('筛选成功');
    loading.value = false;
  }, 300);
};

// 重置筛选条件
const resetFilter = () => {
  filterForm.user = '';
  filterForm.action = '';
  filterForm.dateRange = [];
  currentPage.value = 1; // 重置时回到第一页
  total.value = studentStore.logs.length; // 重置总数
  ElMessage.info('已重置筛选条件');
};

// 刷新日志
const refreshLogs = () => {
  loading.value = true;
  // 模拟刷新延迟
  setTimeout(() => {
    ElMessage.success('日志刷新成功');
    loading.value = false;
  }, 300);
};

// 清空日志
const clearLogs = () => {
  ElMessageBox.confirm(
    '确定要清空所有日志记录吗？此操作不可恢复！',
    '确认清空',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    // 实际清空日志操作
    studentStore.logs.length = 0;
    total.value = 0; // 更新总数
    ElMessage.success('日志清空成功');
    refreshLogs(); // 刷新显示
  })
  .catch(() => {
    ElMessage.info('已取消操作');
  });
};

// 初始化数据
onMounted(() => {
  refreshLogs()
})
</script>

<style scoped>
.log-management {
  padding: 20px;
  height: 100%;
}

.log-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions {
  display: flex;
  gap: 10px;
}

.filter-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.filter-form .el-form-item {
  margin-bottom: 0;
}

.log-table {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>